<script setup>
import { onMounted, reactive, ref } from 'vue';
import { getWareListApi, saveWareInfoApi, getWareInfoByIdApi, updateWareInfoApi, deleteWareInfoApi } from '@/apis/wms/ware.js';
import { Delete, Edit, Search } from '@element-plus/icons-vue';

// 查询参数
const params = reactive({
  name: '',
  address: '',
  areacode: '',
  pageNum: 1,
  pageSize: 10,
})

// 获取数据
const wareData = ref({})
const getWareList = async () => {
  const res = await getWareListApi(params);
  wareData.value = res.data;
}

// 条件查询
const handleQuery = () => {
  getWareList()
}

// 分页
const getWareListPage = (currentIndex) => {
  params.pageNum = currentIndex;
  getWareList();
}

// 表单
const wareForm = ref({})
const dialogFormVisible = ref(false)
var title = ''
// 添加/修改
const handleAddOrUpdate = async (id) => {
  if (id === null) {
    // 添加
    title = "添加";
    dialogFormVisible.value = true;
    wareForm.value = {};
  } else {
    // 修改
    title = "修改";
    const res = await getWareInfoByIdApi(id);
    wareForm.value = res.data;
    dialogFormVisible.value = true;
  }
}

// 点击确定
const handleConfirm = () => {
  if (wareForm.value.id === null || wareForm.value.id === '' || wareForm.value.id === void 0) {
    // 添加
    saveWareInfoApi(wareForm.value)
      .then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '添加成功',
            type: 'success',
          })
          getWareList();
          dialogFormVisible.value = false;
        }
      })
  } else {
    // 修改
    updateWareInfoApi(wareForm.value)
      .then(res => {
        if (res.code === 0) {
          ElMessage({
            message: '修改成功',
            type: 'success',
          })
          getWareList();
          dialogFormVisible.value = false;
        }
      })
  }
}

// 删除
const handleRemove = (id) => {
  ElMessageBox.confirm(
    '你确定要删除此仓库吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    })
    .then(() => {
      let ids = [];
      ids.push(id);
      deleteWareInfoApi(ids)
        .then(res => {
          if (res.code === 0) {
            ElMessage({
              message: '删除成功',
              type: 'success',
            })
            getWareList();
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 重置
const handleRefresh = () => {
  params.name= '';
  params.address= '';
  params.areacode= '';
  params.pageNum= 1;
  params.pageSize= 10;
  getWareList();
}

onMounted(() => getWareList())
</script>

<template>
  <div class="container">
    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <span style="display: inline-block;width: 60px;">仓库名</span>
        <el-input v-model="params.name" placeholder="Please input" clearable style="width: 240px;" />
        <span style="display: inline-block;width: 60px;margin-left: 10px;">仓库地址</span>
        <el-input v-model="params.address" placeholder="Please input" clearable style="width: 240px;" />
        <span style="display: inline-block;width: 60px;margin-left: 10px;">区域编码</span>
        <el-input v-model="params.areacode" placeholder="Please input" clearable style="width: 240px;" />
        <el-button type="primary" :icon="Search" style="margin-left: 10px;" @click="handleQuery">搜索</el-button>
        <el-button @click="handleRefresh">重置</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24" style="display: flex;justify-content: flex-start;align-items: center;margin-bottom: 10px;">
        <el-button type="primary" plain @click="handleAddOrUpdate(null)">添加仓库</el-button>
        <el-button type="danger" plain @click="handleRemoves">批量删除</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="wareData.list" border style="width: 100%">
          <el-table-column prop="name" label="仓库名" align="center" />
          <el-table-column prop="address" label="仓库地址" align="center" />
          <el-table-column prop="areacode" label="区域编码" width="200" align="center" />
          <el-table-column label="操作" width="250" align="center">
            <template v-slot="scope">
              <el-button type="primary" :icon="Edit" circle @click="handleAddOrUpdate(scope.row.id)" />
              <el-button type="danger" :icon="Delete" circle style="margin-left: 20px;"
                @click="handleRemove(scope.row.id)" />
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <div class="pageination">
      <el-pagination v-model:current-change="wareData.pageNum" :page-size="wareData.pageSize" background
        layout="prev, pager, next" :page-count="wareData.pages" @current-change="getWareListPage" />
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" :title="title" style="width: 35%;">
    <el-form :model="wareForm" style="width: 96%;" status-icon label-width="90px">
      <el-form-item label="仓库名">
        <el-input v-model="wareForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="仓库地址">
        <el-input v-model="wareForm.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="区域编码">
        <el-input v-model="wareForm.areacode" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang='scss'></style>